<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/first' }">位置：</el-breadcrumb-item>
      <el-breadcrumb-item>个人管理</el-breadcrumb-item>
      <el-breadcrumb-item>请假信息</el-breadcrumb-item>
    </el-breadcrumb>
    <br />
    <!-- 信息、添加列表切换 -->
    <el-row>
      <el-button type="primary" plain @click="show(1)">请假信息</el-button>
      <el-button type="success" plain @click="show(2)">请假申请</el-button>
    </el-row>
    <br />
    <!-- 查询 -->
    <!-- 查询请假信息 -->
    <el-form :inline="true"  class="demo-form-inline" v-show="isShow1">
      <el-form-item label="请假条查询：">   
        <el-select v-model="search" placeholder="请假信息">
          <el-option label="全部" value=""></el-option>
          <el-option label="已同意" value="同意"></el-option>
          <el-option label="已驳回" value="驳回"></el-option>
          <el-option label="未审批" value="未审批"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handlequery()">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 请假信息 -->
    <el-table :data="restData1" style="width: 100%" border v-show="isShow1">
      <el-table-column prop="UserGH" label="员工工号"> </el-table-column>
      <el-table-column prop="name" label="员工姓名"> </el-table-column>
      <el-table-column prop="Submitday" label="提交时间" width="180">
        <template slot-scope="scope">
          {{ scope.row.Submitday | filterTime }}
        </template>
      </el-table-column>
      <el-table-column prop="QJType" label="请假类型"> </el-table-column>
      <el-table-column prop="Tpdescribe" label="请假理由"> </el-table-column>
      <el-table-column prop="QJreson" label="审批理由"> </el-table-column>
      <el-table-column prop="QJStatus" label="审批状态"> </el-table-column>
      <el-table-column label="操作" width="180px">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="restdel(scope.row.Mid)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加请假条 -->
    <el-form ref="form" :model="form" label-width="120px" style="width: 600px; position: relative; left: 285px"
      v-show="isShow2">
      <el-form-item label="请假人">
        <el-input v-model="form.name" disabled ></el-input>
      </el-form-item>
      <el-form-item label="员工工号：">
        <el-input v-model="form.usergh" disabled ></el-input>
      </el-form-item>
      <el-form-item label="请假时间：">
        <el-col>
          <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="销假时间：">
        <el-col>
          <el-date-picker type="date" placeholder="选择日期" v-model="form.date2" style="width: 100%"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="请假类型：">
        <el-col>
           <el-input v-model="form.type"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="请假理由：">
        <el-col>
           <el-input type="textarea" v-model="form.because"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addok">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
import Qs from "../../node_modules/qs";
import moment from "moment";
export default {
  // 时间格式化
  filters: {
    filterTime(val) {
      return moment(val).format("YYYY-MM-DD HH:mm:ss");
    },
  },
  data() {
    return {
      isShow1: true, // 信息显示
      isShow2: false, // 添加隐藏
      search:'',//收索内容
      // 添加合同
      form: {
         name: "", // 请假人
        usergh: "", // 员工工号
        date1: "", // 请假时间
        date2: "", // 销假时间
        type: "", // 请假类型
        because:''//请假原因
      },
      restData: [], // 个人请假信息列表
      restData1: [], // 用于筛选过滤
    };
  },
  watch:{
    search:{
      immediate:true,
      handler(v){
        console.log(v);
        this.restData1=this.restData.filter(item=>{
          return item.QJStatus.includes(v)
        })
      }
    }
  },
  methods: {
    // 获取数据
    reshow() {
      let that = this;
      var username = this.$store.state.logininfo.UserGH;
      var name = this.$store.state.logininfo.UserName;
      axios({
        method: "get",
        url: `/person_rest?username=${username}`,
        data: username
      }).then(function (res) {
        // that.restData = res.data.data;
        that.restData = res.data.data.filter((item, index) => {
          item.name = name;
          return item
        })
        that.restData1=that.restData;
      });
    },
    // 清空
    empty() {
      this.form.date1 = "";
      this.form.date2 = "";
      this.form.because= "";
      this.form.type= "";
    },
    // 信息、添加列表切换
    show(e) {
      if (e == 1) {
        this.isShow1 = true;
        this.isShow2 = false;
        this.reshow();
      } else {
        this.isShow1 = false;
        this.isShow2 = true;
      }
    },
    // 模糊查询合同信息
    handlequery() {
      let that = this;
      let params = {
        name: this.formInline.xingming,
        // hetong: this.formInline.qita,
      };
      axios({
        method: "post",
        url: "http://127.0.0.1:9090/searchcontract",
        data: Qs.stringify(params),
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
      }).then(function (res) {
        that.contractData = res.data.data;
      });
    },
    // 添加请假条
    addok() {
      let that = this;
      let bigin = new Date(this.form.date1).toLocaleDateString();
      let end= new Date(this.form.date2).toLocaleDateString();
      let subtime=new Date().toLocaleDateString();
      var obj={}
      obj.usergh=this.form.usergh;
      obj.because=this.form.because;
      obj.bigin=bigin
      obj.end=end
      obj.subtime=subtime
      obj.type=this.form.type;
    console.log(obj);
      axios({
        method: "post",
        url: "/addrest",
        data:obj
      }).then(function (res) {
        console.log(res);
        if (res.data.state == 1) {
          alert("添加成功");
          that.empty();
          that.isShow1 = true;
          that.isShow2 = false;
        } else {
          alert("添加失败");
          that.empty();
        }
      });
    },
    // 删除请假条
    restdel(id) {
      console.log(id);
      let that = this;
      axios({
        method: "get",
        url: `/Del_rest?id=${id}`,
      }).then(function (res) {
        console.log(res);
        if (res.data.state == 1) {
          alert("删除成功");
        } else {
          alert("删除失败");
        }
        that.reshow();
      });
    },
  },
  created() {
    this.reshow();
    this.form.usergh=this.$store.state.logininfo.UserGH;
    this.form.name=this.$store.state.logininfo.UserName;
  },
};
</script>

<style scoped>
/* 列表切换、模糊查询左对齐 */
.el-row,
.el-table {
  text-align: left;
}
.demo-form-inline{
  text-align: left;
}
.el-form-item__label {
  text-align: left !important;
}
.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
    border-bottom: 1px solid #EBEEF5;
    text-align: center;
}
.demo-form-inline .el-input.is-disabled .el-input__inner {
    background-color: #F5F7FA;
    border-color: #E4E7ED;
    color: #4c4f55;
    cursor: not-allowed;
}
.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
    border-bottom: 1px solid #EBEEF5;
    text-align: center;
}
</style>